<template>
	<view>
		<view 
			v-for="(item,index) in addressList"
			class="margin-sm u-border padding bg-fff" 
			:class="{default:item.isdefault}"
		>
			<view class="default-cont">
				默
			</view>
			<view class="flex justify-between">
				<view class="flex align-center">
					<text
						class="iconfont icon-gouxuan margin-right"
						@tap="handleCheckIdx(index)"
						:class="{'color-yellow':index==checkIdx}"
					></text>
					<view class="">
						{{item.name}}，{{item.phone}}
						<view class="">
							{{item.city}},
							{{item.district}},
							{{item.region}}
						</view>
					</view>
				</view>
				<view class="edit margin-bottom-xs">
					<text class="iconfont icon-bianji"></text>
				</view>
			</view>
			<view class="flex justify-around align-center margin-top">
				<view v-if="item.isdefault" class="">
					默认地址
				</view>
				<view v-else @tap="handleDefault(index)" class="" >
					设为默认
				</view>
				
				<u-line length="15" direction="col"></u-line>
				<view @tap="handleDel(index)" class="">
					删除地址
				</view>
			</view>
		</view>
		<view class="text-center">
			<navigator url="address-detail">
				<button class="cu-btn bg-brown">
					新增地址
				</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState({
				addressList:state=>state.address.addressList,
				checkIdx:state=>state.address.checkIdx
			})
		},
		methods: {
			handleDefault(idx) {
				this.$store.dispatch('address/addressDefaultAct',idx)
			},
			handleDel(idx){ //删除
				this.$store.dispatch('address/addressDelAct',idx)
			},
			handleCheckIdx(idx){
				this.$store.commit('address/addressCheckIdxMut',idx)
			}
		},
	}
</script>

<style lang="scss">
.edit{
	width: 80upx;
	height: 80upx;
	text-align: center;
	line-height: 80upx;
	background-color: #e6e6e6;
	border-radius: 50%;
	
}
.default-cont{
	display: none;
}
.default{
	position: relative;
	overflow: hidden;
	.default-cont{
		padding: 40upx 10upx 10upx;
		width: 150upx;
		background-color: #FAE456;
		font-size: 12upx;
		text-align: center;
		position: absolute;
		top: -30upx;
		right: -65upx;
		transform: rotate(45deg);
		display: block;
	}
}

</style>
